<template>
  <div class="mine-box admin-order-box">
    <div class="user-box-title" :style="back">
      <adminuserinfo></adminuserinfo>
      <div class="m-moneybox">
        <div class=" choose-input-box" style="width:100%">
          <span size="30" class="iconfont icon-sousuo"></span>
          <input maxlength="15" type="text" class="choose-input" placeholder="请输入用户昵称或者手机号" v-model="username" />
        </div>

      </div>
    </div>
    <div class="user-list List">
      <div class="paixu">
        <div class="px-text" @click="czpx" :style="style">
          累计充值
          <span class="iconfont icon-nopaixu1"></span>
        </div>
        <div class="px-text" @click="yepx" :style="style1">
          余额数
          <span class="iconfont icon-nopaixu1"></span>
        </div>
      </div>
      <mu-load-more
        @refresh="refresh"
        :refreshing="refreshing"
        :loaded-all="loaded_all"
        :loading="loading"
        @load="load"
      >
        <mu-list>
          <div class="single-user" v-for="(item,index) in userList" :key="index">
            <div class="user-name">
              <div class="headimg">
                <img :src="item.headImage" alt />
              </div>
              <span class="name">{{item.userName}}</span>
              <span class="name" style="margin-left: 20px">{{item.mobile}}</span>
            </div>
            <div class="user-money">
              <div class="single-money">
                <p class="m-title">累计充值(元）</p>
                <p class="m-num">{{item.rechargeSum || 0}}</p>
              </div>
              <div class="single-money">
                <p class="m-title">余额(元)</p>
                <p class="m-num">{{item.lineBalance || 0}}</p>
              </div>
              <div class="single-money" style="margin-right: 0;">
                <p class="m-title">卡余额(元)</p>
                <p class="m-num">{{item.cardBalance || 0}}</p>
              </div>
            </div>
          </div>
          <div v-show="nolist" class="nolist">
            <span class="iconfont icon-charging"></span>
            <p>暂无用户</p>
          </div>
        </mu-list>
      </mu-load-more>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      back: {
        background:
          "url(" + require("../../../assets/image/minebackimg.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      userList: [],
      num: 5,
      nolist: true,
      loaded_all: false,
      refreshing: false,
      loading: false,
      username: "",
      style: "",
      style1: "",
      isDesccz:true,
      isDescye:true,

    };
  },
  methods: {
    getList(params) {
      this.$api.getUserList(params).then(res => {
        if (res.data != "") {

          if (res.data.message.code == 0) {
            this.userList = res.data.data.records;

            this.nolist = false;
            if (res.data.data.pages == 1) {
              Toast("已加载全部数据");
              this.loaded_all = true;
            }
          }
        } else {
          this.userList = [];
          Toast("暂无用户");
        }
      });
    },
    czpx() {
      this.style = "color:#fff";
      this.style1 = "";

       this.getList({
        pageNo: 1,
        pageSize: this.num,
        orderKey: "rechargeSum",
        isDesc: this.isDesccz
      });
      this.isDesccz=!this.isDesccz;
    },
    yepx() {
      console.log(this.isDescye)
      this.style = "";
      this.style1 = "color:#fff";
      this.getList({
        pageNo: 1,
        pageSize: this.num,
        orderKey: "sum",
        isDesc: this.isDescye
      });
      this.isDescye=!this.isDescye;
    },
    refresh() {
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      setTimeout(() => {
        this.refreshing = false;
        this.getList({ pageNo: 1, pageSize: this.num });
      }, 2000);
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.num += 3;
        this.getList({ pageNo: 1, pageSize: this.num });
      }, 2000);
    }
  },
  mounted() {
    this.getList({ pageNo: 1, pageSize: this.num });
  },
  watch: {
    username: function(name) {
      this.getList({ pageNo: 1, pageSize: this.num, userName: name });
    },
    userList: function(v) {
      if (v == "") {
        this.nolist = true;
      } else {
        this.nolist = false;
      }
    }
  }
};
</script>

<style>
</style>
